<template>
  <div class="chart-container" ref="chartContainer"></div>
</template>

<script setup>
  import { ref, onMounted, onUnmounted } from 'vue'
  import * as echarts from 'echarts'
  import usaJson from './usa.json'

  const chartContainer = ref(null)
  let chart = null

  // 城市坐标数据（经纬度）
  const cities = {
    'Seattle': [-122.3321, 47.6062],
    'Sunnyvale': [-122.0363, 37.3688],
    'Los Angeles': [-118.2437, 34.0522],
    'Denver': [-104.9903, 39.7392],
    'Kansas': [-94.5786, 39.0997],
    'Houston': [-95.3698, 29.7604],
    'Chicago': [-87.6298, 41.8781],
    'Indianapolis': [-86.1581, 39.7684],
    'Atlanta': [-84.3879, 33.7490],
    'Washington': [-77.0369, 38.9072],
    'New York': [-74.0059, 40.7128]
  }

  // 连接关系
  const connections = [
    ['Seattle', 'Sunnyvale'],
    ['Seattle', 'Denver'],
    ['Sunnyvale', 'Los Angeles'],
    ['Sunnyvale', 'Denver'],
    ['Los Angeles', 'Houston'],
    ['Denver', 'Kansas'],
    ['Kansas', 'Indianapolis'],
    ['Kansas', 'Houston'],
    ['Houston', 'Atlanta'],
    ['Chicago', 'Indianapolis'],
    ['Indianapolis', 'Atlanta'],
    ['Atlanta', 'Washington'],
    ['Washington', 'New York'],
    ['Chicago', 'New York']
  ]

  onMounted(() => {
    // 初始化图表
    chart = echarts.init(chartContainer.value)

    // 注册地图数据
    echarts.registerMap('USA', usaJson)

    // 准备节点数据
    const nodes = Object.entries(cities).map(([name, coords]) => ({
      name,
      value: coords,
      symbolSize: 50,
      symbol: 'circle',
      itemStyle: {
        color: '#4B70E2',
        shadowColor: 'rgba(0, 0, 0, 0.2)',
        shadowBlur: 5
      },
      label: {
        show: true,
        position: 'inside',
        formatter: '{b}',
        fontSize: 10,
        color: '#fff',
        fontWeight: 'normal'
      }
    }))

    // 准备边的数据
    const edges = connections.map(([source, target]) => ({
      source,
      target,
      lineStyle: {
        width: 2,
        color: '#4B70E2',
        opacity: 0.6,
        curveness: 0,
        shadowColor: 'rgba(0, 0, 0, 0.2)',
        shadowBlur: 5
      }
    }))

    // 设置图表配置
    const option = {
      backgroundColor: 'transparent',
      geo: {
        map: 'USA',
        roam: true,
        zoom: 1.6,
        center: [-95, 38],
        silent: true,
        itemStyle: {
          areaColor: 'transparent',
          borderColor: 'transparent',
          borderWidth: 0
        },
        emphasis: {
          disabled: true
        }
      },
      series: [
        {
          type: 'graph',
          coordinateSystem: 'geo',
          data: nodes,
          links: edges,
          legendHoverLink: true,
          hoverAnimation: true,
          emphasis: {
            focus: 'adjacency',
            scale: true,
            lineStyle: {
              width: 5,
              opacity: 1,
              shadowBlur: 10
            },
            itemStyle: {
              color: '#ff4d4f'
            },
            label: {
              show: true,
              fontSize: 10,
              fontWeight: 'normal',
              color: '#fff'
            }
          }
        }
      ]
    }

    // 渲染图表
    chart.setOption(option)

    // 响应窗口大小变化
    window.addEventListener('resize', handleResize)
  })

  // 处理窗口大小变化
  const handleResize = () => {
    chart && chart.resize()
  }

  // 组件卸载时清理
  onUnmounted(() => {
    window.removeEventListener('resize', handleResize)
    chart && chart.dispose()
  })
</script>

<style scoped>
  .chart-container {
    width: 100%;
    height: 800px;
    background-color: transparent;
    border-radius: 12px;
    overflow: hidden;
  }
</style>